<template>
	<view class="cont" >
		<view class="comment">
			<view class="dot"></view>
			<text>全部评论(199)</text>
		</view>
		<view class="" v-for="(item, index) in conten" :key="index">
			
			<view  style="padding-bottom: 90upx;">
				<view class="conten">
					<image :src="item.image" mode="" class="img"></image>
					<view class="names">
						<p>{{ item.name }}</p>
						<p>{{ item.content }}</p>
						<text>{{ item.time }}</text>
						<text>回复</text>
					</view>
					<image :src="item.zan" mode="" class="xin"></image>
					<text>{{ item.num }}</text>
				</view>
				<view class="conten1" v-for="(item, index) in item.msg" :key="index">
					<image :src="item.image" mode="" class="img"></image>
					<view class="name">
						<p>{{ item.name }}</p>
						<p>{{ item.content }}</p>
						<text>{{ item.time }}</text>
						<text>回复</text>
					</view>
					<image :src="item.zan" mode="" class="xin"></image>
					<text>{{ item.num }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:["commentList"],
	data(){
		return{
			conten: [
				{
					image: require('../../static/img/news/tou.png'),
					name: '娃哈哈',
					content: '利斯基今晚哪里装货？',
					num: '22',
					zan: require('../../static/img/news/xin.png'),
					time: '20：45',
					msg: [
						{
							image: require('../../static/img/news/tou.png'),
							name: '娃哈哈',
							content: '利斯基今晚哪里装货？',
							num: '22',
							zan: require('../../static/img/news/xin.png'),
							time: '20：45'
						}
					]
				}
			]
		}
	},
	onLoad:function(){
		
	},
	methods:{
		
	}
}
	
</script>
<style lang="scss">
.cont{
	.comment {
		display: inline-flex;
		font-size: 32upx;
		height: 65upx;
		line-height: 65upx;
		padding-top: 60upx;
		.dot {
			width: 6upx;
			height: 32upx;
			background: rgba(238, 15, 36, 1);
			border-radius: 3px;
			position: relative;
			margin-right: 10upx;
			top: 18upx;
		}
	}
	.conten {
		width: 690upx;
		display: inline-flex;
		image {
			width: 90upx;
			height: 90upx;
			position: relative;
			margin-right: 10upx;
			top: 0upx;
		}
		.xin {
			width: 62upx;
			height: 56upx;
			position: relative;
			top: 0upx;
		}
		.names {
			width: 490upx;
			p:first-child {
				font-size: 28upx;
			}
			p:last-child {
				font-size: 30upx;
				padding-bottom: 20upx;
			}
			text {
				font-size: 28upx;
				color: #989898;
			}
		}
	}
	.conten1 {
		width: 590upx;
		display: inline-flex;
		padding-left: 100upx;
		image {
			width: 60upx;
			height: 60upx;
			position: relative;
			margin-right: 10upx;
			top: 0upx;
		}
		.xin {
			width: 62upx;
			height: 56upx;
		}
		.name {
			width: 420upx;
			p:first-child {
				font-size: 28upx;
			}
			p:last-child {
				font-size: 30upx;
				padding-bottom: 20upx;
			}
			text {
				font-size: 28upx;
				color: #989898;
			}
		}
	}
}

</style>
